<template>
	<view class="plate-number-container">
		<view class="plate-title">请点击输入车牌号</view>
		<view :class="['plate-input-box',platecolorlist[colorIndex]]">
			 <view @click="activeIndex=0" :class="['xnumber',activeIndex===0?'active':'']">{{platenumber[0]}}</view>
			 <view @click="activeIndex=1" :class="['xnumber',activeIndex===1?'active':'']">{{platenumber[1]}}</view>
			 <view class="digit">·</view>
			 <view @click="activeIndex=2" :class="['xnumber',activeIndex===2?'active':'']">{{platenumber[2]}}</view>
			 <view @click="activeIndex=3" :class="['xnumber',activeIndex===3?'active':'']">{{platenumber[3]}}</view>
			 <view @click="activeIndex=4" :class="['xnumber',activeIndex===4?'active':'']">{{platenumber[4]}}</view>
			 <view @click="activeIndex=5" :class="['xnumber',activeIndex===5?'active':'']">{{platenumber[5]}}</view>
			 <view @click="activeIndex=6" :class="['xnumber',activeIndex===6?'active':'']">{{platenumber[6]}}</view>
			 <view @click="activeIndex=7" :class="['xnumber',activeIndex===7?'active':'']">{{platenumber[7]}}</view>
		</view>
		<view class="province">
			<view @click="clickItem(item)" :class="['box-item',activeIndex===0?'able':'disable']" v-for="(item,index) in province">{{item}}</view>
		</view>
		<view class="number">
			<block v-for="(item,index) in number">
			<view v-if="index<=9" @click="clickItem(item)" :class="['box-item',(activeIndex!==0 && activeIndex!==1)?'able':'disable']">{{item}}</view>
			</block>
			<block v-for="(item,index) in number">
			<view v-if="index>9" @click="clickItem(item)" :class="['box-item',activeIndex!==0?'able':'disable']">{{item}}</view>
			</block>
		</view>
		<view class="font">
			<view @click="clickItem(item)" :class="['box-item',(activeIndex===6 || activeIndex===7)?'able':'disable']" v-for="(item,index) in font">{{item}}</view>
			<view @click="clickColor(index)" :class="['color-item',platecolorlist[index]]" v-for="(item,index) in platecolor">{{item}}</view>
		</view>
	</view>
</template>
<script>
export default {
    name: "platenumberpc",
    props: {

    },
    data: function () {
        return {
            platenumber:['贵','','','','','',''],
            platecolor:['蓝牌','黄牌','绿牌','黄绿牌','白牌','黑牌'],
            platecolorlist:['blue','yellow','green','yellow-green','white','black'],
            colorIndex:0,
            province: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼', '川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新', '藏', '临'],
            font:['使', '领', '警', '学', '港', '澳'],
            number: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
            activeIndex:1,
        };
    },
	emits: ['change'],
    methods:{
        clickItem:function (item){
            this.platenumber[this.activeIndex]=item;
            if(this.activeIndex<7){
                this.activeIndex++;
            }
			this.changePlateNumber();
        },
        clickColor:function (item){
            this.colorIndex=item;
        },
        getPlatenumber:function (){
            return this.platenumber.join('');
        },
        getPlatecolor:function (){
            return this.platecolorlist[this.colorIndex];
        },
		changePlateNumber:function(){
			this.$emit('change',this.platenumber.join(''));
		}
    }
};
</script>
<style lang="scss" scoped>
	.plate-number-container{
	    width: 100%;
	}
	.plate-number-container .plate-title{
	    text-align: center;
	    font-size: 32px;
	    margin: 10px 0 20px 0;
	}
	.plate-number-container .plate-input-box{
	    width: 400px;
	    display: flex;
	    justify-content: space-around;
	    align-items: center;
	    margin: 0 auto;
	    padding: 10px 20px;
	    border-radius: 10px;
	}
	.plate-number-container .blue{
	    background: deepskyblue;
	    color: #fff;
	}
	.plate-number-container .yellow{
	    background: #e6a23c;
	    color: #fff;
	}
	.plate-number-container .green{
	    background: #67c23a;
	    color: #fff;
	}
	.plate-number-container .yellow-green{
	    background: linear-gradient(to right,#e6a23c,#67c23a);
	    color: #fff;
	}
	.plate-number-container .white{
	    background: #eeeeee;
	    color: #363636;
	}
	.plate-number-container .black{
	    background: #363636;
	    color: #fff;
	}
	.plate-number-container .plate-input-box .xnumber{
	    border: 1px solid #fff;
	    width: 40px;
	    height: 40px;
	    font-size: 20px;
	    text-align: center;
	    line-height: 40px;
	    cursor: pointer;
	}
	.plate-number-container .plate-input-box .active{
	    background: #989898;
	    font-weight: bolder;
	}
	.plate-number-container .province,
	.plate-number-container .number{
	    width: 100%;
	    display: flex;
	    justify-content: space-between;
	    margin: 15px auto;
	}
	.plate-number-container .font{
	    width: 100%;
	    display: flex;
	    margin: 15px auto;
	}
	.plate-number-container .box-item{
	    width: 40px;
	    height: 40px;
	    text-align: center;
	    line-height: 40px;
	    font-size: 18px;
	}
	.plate-number-container .font .box-item{
	    margin-right: 10px;
	}
	.plate-number-container .digit{
	    font-size: 33px;
	}
	.plate-number-container .box-item.able{
	    cursor: pointer;
	    color: green;
	    border: 1px solid green;
	}
	.plate-number-container .box-item.able:hover{
	    background: #e89595;
	    color: #fff;
	}
	.plate-number-container .box-item.disable{
	    cursor: not-allowed;
	    color: darkgray;
	    border: 1px solid darkgray;
	}
	.plate-number-container .color-item{
	    cursor: pointer;
	    text-align: center;
	    line-height: 40px;
	    font-size: 18px;
	    margin-right: 10px;
	    padding: 0 10px;
	}
</style>